11 ajax实践

发表于 | 分类于

题目1： ajax 是什么？有什么作用？

  • 1.ajax是什么？
    Ajax全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
    2.Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）
    3.Ajax是一种技术方案,但并不是一种新的编程语言新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接受HTTP响应。实现在页面不刷新的情况下和服务器进行数据交互。一句话实现两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

  • 2.ajax作用：
    传统的WEB应用程序模型是这样工作的：用户的界面操作触发HTTP请求，服务器在接收到请求之后进行一些业务逻辑处理，如保存数据等，然后向客户端返回一个HTML页面。但这种方式并没有给予用户很好的应用体验，当服务器在处理数据的时候，用户则处于等待的状态，每一步操作都需要等待，太多的等待会使用户越来越没有耐心。而Ajax则大不相同，它通过Ajax引擎，使得应用过程很自然，操作很流畅，因为其只和服务器交换有用的数据，而页面显示等不必要的数据则不再重新加载。Ajax引擎其实就是JavaScript、XML、XMLHttpRequest等等各项技术的综合应用。
    通过 Ajax，我们可以使得客户端得到丰富的应用体验及交换操作，而用户不会感觉到有网页提交或刷新的过程，页面也不需要被重新加载，应用的数据交换都被隐藏。

  • 3.ajax优缺点：

    • 优点：
      • 更新数据页面无需刷新，用户体验更佳
      • 使用异步方式与服务器通信，响应速度更快
      • 可将服务器以前负担的一些工作转嫁到客户端，利用客户端的闲置能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。AJAX的原则是“按需取数据”，可最大程度减少冗余请求
      • 作为基于标准化的并被广泛支持的技术，无需下载插件或小程序
      • 使因特网应用程序更小、更快、更友好
    • 缺点：
      • 不支持浏览器back按钮
      • AJAX暴露了与服务器交互的细节带来安全问题
      • 对搜索引擎的支持较弱
      • 破坏了程序的异常机制
      • 不容易调试

题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

在开发之前，前后端需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）

  • 前后端开发联调注意事项：

    • URL：接口名称
    • 发送请求的参数和格式(get/post)
    • 数据响应的数据格式(数组/对象)

    • 根据前后端约定，整理接口文档

    • 如何mock数据

      • 搭建web服务器
      • 根据接口文档仿造假数据
      • 关联前后端文件，开启web服务器
      • 验证前端页面功能及显示是否正确

题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var isLoading = false //添加状态锁,初始为false，用于判断是否在加载数据
btn.addEventListener('click',function(){
       if(!isLoading){
          return;   //如果正在请求数据，这次点击什么都不做
       }
     var xhr = new XMLHttpRequest()
     xhr.onreadystatechange = function(){
       if(xhr.readystate === 4){
          if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
              console.log(xhr.responseText)
       }else{
              console.log("error")
       }
       isLoading = false;  //readystate = 4数据到来，状态锁变为false,可以再次点击
       }
       xhr.open('get',url,true);
       xhr.send()
       isloading = true //数据发送，进入等待数据状态，状态锁变为true
})

题目4：实现加载更多的功能，效果范例 。

实现代码:
Github
本地mock成功:
本地mock成功.png